<template>
    <div class="container">
        <el-row class="tac">
            <el-col :span="3">
                <el-menu
                default-active="/memberInfo"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                router >
               <el-menu-item index="/memberInfo">
                    <span slot="title">个人信息</span>
                </el-menu-item>
                <el-menu-item index="/seller">
                    <span slot="title">商家管理</span>
                </el-menu-item>
                <el-menu-item index="/order" >
                    <span slot="title" >我的订单</span>
                </el-menu-item>
                <el-menu-item index="/collect">
                    <span slot="title" >我的收藏</span>
                </el-menu-item>
                </el-menu>
            </el-col>
            <el-col span="21" style="padding:20px;">
                <keep-alive>
                    <router-view></router-view>
                </keep-alive>
            </el-col>
        </el-row>
    </div>

</template>
<script>

export default ({

   data() {
       return{

       }
   },
   methods:{
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
   },
   created(){

   }
})
</script>
<style scoped>
.container {
    padding: 50px 100px;
}
</style>